<template>
  <div>
    <el-form
      ref="addQuestion"
      :rules="formRules"
      :inline="true"
      label-position="right"
      label-width="80px"
      size="small"
      :model="query"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="学科名称"  prop="subject_id">
            <el-select
              v-model="query.subject_id"
              placeholder="请选择学科"
              clearable
              @change="cancle"
            >
              <el-option
                v-for="item in treeList.data"
                :key="item.id"
                style.native="z-index:99999999;"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目录名称"  prop="directory_id">
            <el-select
              v-model="query.directory_id"
              placeholder="请选择目录"
              clearable
            >
              <el-option
                v-for="item in directoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="标签信息"  prop="tag_id">
            <el-select v-model="query.tag_id" multiple placeholder="技能标签">
              <el-option
                v-for="item in tagLists"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="试题难度" required prop="difficulty">
            <el-radio-group v-model="query.difficulty">
              <el-radio :label="1">简单</el-radio>
              <el-radio :label="2">中等</el-radio>
              <el-radio :label="3">困难</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="试题类型" required>
            <el-select
              v-model="query.quest_type"
              placeholder="选择题型"
              clearable
            >
              <el-option label="单选题" :value="1" />
              <el-option label="多选题" :value="2" />
              <el-option label="判断题" :value="3" />
              <el-option label="简答题" :value="4" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否真题" required>
            <el-radio-group
              v-model="query.is_true_question"
              placeholder="请选择是否真题"
              clearable
            >
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="题干信息" required prop="question">
            <div>
              <WangEditor v-model="query.question" ref-name="题干信息" />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="试题答案" required>
            <span v-if="query.quest_type.length < 1"
              >请选择试题类型，生成答案模板</span
            >
            <span v-else-if="query.quest_type == 1" :key="1">
              <!-- 单选 -----------------------------------------------------------------------！！！！！！！！！！！！！！！！--------->
              <el-table :data="radioData" border>
                <el-table-column label="单选项" align="center" width="120">
                  <template slot-scope="scope">
                    <el-checkbox
                      v-model="radioData[scope.$index].is_true"
                      @change="onCheck(radioData, scope.row)"
                      >{{ scope.row.code }}</el-checkbox
                    >
                  </template>
                </el-table-column>

                <el-table-column label="单选项内容" align="center" width="450">
                  <template slot-scope="scope">
                    <el-input
                      v-model="radioData[scope.$index].content"
                      type="textarea"
                      placeholder="请输入信息"
                      rows="2"
                      size="normal"
                    />
                  </template>
                </el-table-column>

                <el-table-column label="选项图片" align="center" width="250">
                  <template>
                    <span />
                  </template>
                </el-table-column>

                <el-table-column label="操作" align="center" width="200">
                  <template slot-scope="scope">
                    <el-button
                      v-if="scope.$index === radioData.length - 1"
                      type="success"
                      icon="el-icon-plus"
                      size="medium"
                      align="center"
                      circle
                      @click="addTabList(radioData)"
                    />

                    <el-button
                      v-if="scope.$index === radioData.length - 1"
                      type="danger"
                      icon="el-icon-delete"
                      size="medium"
                      align="center"
                      circle
                      @click="deleteTabList(radioData)"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </span>
            <span v-else-if="query.quest_type == 2" :key="2">
              <!-- 多选 -----------------------------------------------------------------------！！！！！！！！！！！！！！！！--------->
              <el-table :data="checkData" border>
                <el-table-column label="多选项" align="center" width="120">
                  <template slot-scope="scope">
                    <el-checkbox v-model="checkData[scope.$index].is_true">{{
                      scope.row.code
                    }}</el-checkbox>
                  </template>
                </el-table-column>

                <el-table-column label="多选项内容" align="center" width="450">
                  <template slot-scope="scope">
                    <el-input
                      v-model="checkData[scope.$index].content"
                      type="textarea"
                      placeholder="请输入信息"
                      rows="2"
                      size="normal"
                    />
                  </template>
                </el-table-column>

                <el-table-column label="选项图片" align="center" width="250">
                  <template slot-scope="">
                    <span />
                  </template>
                </el-table-column>

                <el-table-column label="操作" align="center" width="200">
                  <template slot-scope="scope">
                    <el-button
                      v-if="scope.$index === checkData.length - 1"
                      type="success"
                      icon="el-icon-plus"
                      size="medium"
                      align="center"
                      circle
                      @click="addTabList(checkData)"
                    />

                    <el-button
                      v-if="scope.$index === checkData.length - 1"
                      type="danger"
                      icon="el-icon-delete"
                      size="medium"
                      align="center"
                      circle
                      @click="deleteTabList(checkData)"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </span>
            <!-- 判断 -----------------------------------------------------------------------！！！！！！！！！！！！！！！！--------->
            <span v-else-if="query.quest_type == 3">
              <el-table :data="judge" border>
                <el-table-column label="判断题" width="1000px">
                  <template slot-scope="scope">
                    <el-checkbox
                      v-model="judge[scope.$index].is_true"
                      @change="onCheck(judge, scope.row)"
                      >{{ scope.row.code }}</el-checkbox
                    >
                  </template>
                </el-table-column>
              </el-table>
            </span>
            <!-- 简答 -----------------------------------------------------------------------！！！！！！！！！！！！！！！！--------->
            <span v-else-if="query.quest_type == 4">
              <WangEditor v-model="query.quest_answer" ref-name="简答" />
            </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="答案解析" required>
            <div>
              <WangEditor
                v-model="query.quest_remark"
                题干信息
                ref-name="答案解析"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>
            <el-button type="primary" @click="formSubmit">提交</el-button>
            <el-button type="primary" @click="formCancel">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { addQuestion, editQuestion } from "@/api/exam";
import WangEditor from "@/components/WangEditor";
const defaultItem = {
  subject_id: "",
  directory_id: "",
  tag_id: [],
  difficulty: 1,
  quest_type: "",
  is_true_question: 1,
  quest_options: [],
  quest_answer: "",
  quest_remark: "",
  question: "",
};
export default {
  name: "QuestionAdd",
  components: {
    WangEditor,
  },
  // props: {
  //   getQuestionQuery: {
  //     type: Object,
  //   },
  // },
  data() {
    return {
      isAdd: true,
      // tagLists: [],
      query: {
        // 查询信息
        ...defaultItem,
      },
      content: "",
      isLoading: false,
      AddisShow: false,
      radioData: [
        {
          code: "A",
          content: "",
          is_true: null,
          pic: "",
        },
        {
          code: "B",
          content: "",
          is_true: null,
          pic: "",
        },
        {
          code: "C",
          content: "",
          is_true: null,
          pic: "",
        },
        {
          code: "D",
          content: "",
          is_true: null,
          pic: "",
        },
      ],
      checkData: [
        {
          code: "A",
          content: "",
          is_true: null,
          pic: "",
        },
        {
          code: "B",
          content: "",
          is_true: null,
          pic: "",
        },
        {
          code: "C",
          content: "",
          is_true: null,
          pic: "",
        },
        {
          code: "D",
          content: "",
          is_true: null,
          pic: "",
        },
      ],
      judge: [
        { code: "正确", content: "", is_true: null },
        { code: "错误", content: "", is_true: null },
      ],
      formRules: {
        subject_id: [
          {
            required: true,
            message: "请选择学科",
            trigger: "blur",
          },
        ],
        directory_id: [
          {
            required: true,
            message: "请选择目录",
            trigger: "blur",
          },
        ],
        tag_id: [
          {
            required: true,
            message: "请选择试题类型",
            trigger: "blur",
          },
        ],
        difficulty: [
          {
            required: true,
            message: "请选择难度系数",
            trigger: "blur",
          },
        ],
        question: [
          {
            required: true,
            message: "请输入题干内容",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters({
      treeList: "subject/treeList",
    }),
    directoryList() {
      // 目录信息
      // if (!this.query.subject_id) {
      //   return [];
      // } else {
      //   // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      //   this.query.directory_id = "";
      //   const result = this.treeList.data.find(
      //     (val) => val.id == this.query.subject_id
      //   );
      //   return result.children;
      // }
      if (this.query.subject_id) {
        const index = this.treeList.data.findIndex(
          (val) => val.id === this.query.subject_id
        );
        return this.treeList.data[index].children;
      } else {
        return [];
      }
    },
    tagLists() {
      let arr = [];
      if (this.query.subject_id) {
        const index = this.treeList.data.findIndex(
          (val) => val.id === this.query.subject_id
        );
        arr = this.treeList.data[index].children;
      } else {
        arr = [];
      }
      if (this.query.directory_id) {
        const index = arr.findIndex(
          (val) => val.id === this.query.directory_id
        );
        return this.directoryList[index].children;
      } else {
        return [];
      }
    },
  },
  watch: {
    isAdd() {
      if (!this.isAdd) {
        if (this.query.quest_type == 1) {
          this.radioData = JSON.parse(this.query.quest_options);
        }
        if (this.query.quest_type == 2) {
          this.checkData = JSON.parse(this.query.quest_options);
        }
        if (this.query.quest_type == 3) {
          this.judge = JSON.parse(this.query.quest_options);
        }
      }
    },
  },
  mounted() {},
  methods: {
    ...mapActions({
      loadTreeList: "subject/loadTreeList",
    }),
    async formSubmit() {
      await this.$refs.addQuestion.validate();
      if (this.query.quest_type == 1) {
        this.query.quest_answer = this.radioData
          .filter((val) => val.is_true)
          .map((val) => val.code)
          .join();
        this.query.quest_options = this.radioData;
      }
      if (this.query.quest_type == 2) {
        this.query.quest_answer = this.checkData
          .filter((val) => val.is_true)
          .map((val) => val.code)
          .join();
        this.query.quest_options = this.checkData;
      }
      if (this.query.quest_type == 3) {
        this.query.quest_answer = this.judge
          .filter((val) => val.is_true)
          .map((val) => val.code)
          .join();
        this.query.quest_options = this.judge;
      }
      if (this.isAdd) {
        // 添加
        try {
          await addQuestion(this.query);
          this.$message.success("添加还就那个成功");
          this.formCancel();
        } catch (err) {
          console.log(err);
          this.$message.success("添加失败");
        }
      } else {
        // 修改
        try {
          await editQuestion(this.query);

          this.$message.success("修改信息还就那个成功");
          this.formCancel();
        } catch (error) {
          console.log(error);
          this.$message.success("修改信息还就那个失败");
        }
      }
    },
    formCancel() {
      this.$emit("CloseAdd", this.AddisShow);
    },
    addTabList(val) {
      if (val.length >= 6) {
        return this.$message.warning("添加失败！选项最多只能设置6个");
      }
      const listVal = {
        code: String.fromCharCode(65 + val.length),
        content: "",
        is_true: null,
        pic: "",
      };
      val.push(listVal);
    },
    deleteTabList(listVal) {
      if (listVal.length <= 2) {
        return this.$message.warning("删除失败！选项最少有2个");
      }
      listVal.pop();
    },
    onCheck(tableData, listVal) {
      tableData.forEach((item) => (item.is_true = false));
      listVal.is_true = true;
    },
    cancle() {
      this.query.directory_id = "";
    },
  },
};
</script>

<style lang="scss" scoped></style>
